<template>
	<view class="mainpadding">
		<view class="sanshier xiaohei fonweight">原因</view>
		<textarea class="textarea margin_top2" name="" id="" placeholder="请说明原因" v-model="tk_des"></textarea>
		<view class="sanshier xiaohei fonweight margin_top">调课时间</view>
		<view class="mainpadding ffffff margin_top">
			<!-- 日期 -->
			<view class="flexbetween">
				<view class="ershiba  xiaohei nofonweight" style="color: #1ba95b;" @click="changeMonth('pre')">上一月</view>
				<view class="sanshier xiaohei fonweight">{{y+'年'+formatNum(m)+'月'}}</view>
				<view class="ershiba  xiaohei nofonweight" style="color: #1ba95b;" @click="changeMonth('next')">下一月</view>
			</view>
			<scroll-view class="scroll-view_H margin_top" scroll-x="true">
				<view class="scroll-view-item_H uni-bg-red " v-for="(item,index) in dateData" :key="index"
					@click="changeday(item)">
					<!-- 已选中 -->
					<view class=" margin_right4" :class="currentdate==item.date?'zitixhx':'weixzx'">
						<view class="ershiba xiaohei nofonweight">
							{{returnmouth(item.week)}}({{item.mouth}}-{{item.day}})</view>
					</view>
				</view>
			</scroll-view>
			<view class="flexleft flex_wrap" v-if="flag">
				<view :class="kc_kcb_id==item.id?'lvbox':'huibox'"
					v-for="(item,index) in kckcb" :key="item.id" @click="changetime(item)">{{item.start_time}}-{{item.end_time}}
				</view>
			</view>
		</view>
		<template v-if="returnshow(kc_kcb_id)">
			<view class="sanshier xiaohei fonweight margin_top">教练信息</view>
			<view class="mainpadding ffffff margin_top xiaohei main_size">
				{{kc_jlinfo.name}}
				<!-- ：{{kc_jlinfo.mobile}} -->
			</view>
		</template>
		<view class="mainpadding gudingdb ">
			<view class="bigbtn" @click="submit()">提交</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				sjshow: false, //时间
				value1: Number(new Date()),
				listid:"",
				kc_kcb_id:"",
				kc_jlinfo:{},
				tk_des:"",
				tk_time:"",
				currentdate: "", //年月日
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth() + 1, // 月
				kckcb:[],
				dateData:[],
				flag: true,
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.init()
		},
		methods: {
			returnshow(val){
				let isshow=false
				this.kckcb.forEach(item=>{
					if(val==item.id){
						isshow=true
					}
				})
				return isshow
			},
			submit(){
				if(this.tk_des==""){
					httpRequest.toast("请输入调课原因")
					return false
				}
				if(this.kc_kcb_id==""){
					httpRequest.toast("请选择调课时间")
					return false
				}
				httpRequest.request("/api/user/userKcKcbTk", 'GET', {
					id:this.listid,
					kc_kcb_id:this.kc_kcb_id,
					tk_des:this.tk_des,
					tk_time:this.tk_time,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						})
					}
				})
			},
			changetime(item) { //选择时间表
				this.kc_kcb_id = item.id
				this.kc_jlinfo = item.jlinfo
				this.tk_time = this.currentdate
			},
			changeMonth(type) {
				if (type == 'pre') {
					if(this.y==new Date().getFullYear() && this.m==new Date().getMonth() + 1){
						return false
					}
					if (this.m + 1 == 2) {
						this.m = 12;
						this.y = this.y - 1;
					} else {
						this.m = this.m - 1;
					}
				} else {
					if (this.m + 1 == 13) {
						this.m = 1;
						this.y = this.y + 1;
					} else {
						this.m = this.m + 1;
					}
				}
				this.init(true)
			},
			formatNum(num) {
				let res = Number(num);
				return res < 10 ? '0' + res : res;
			},
			returnmouth(val) {
				if (val == 1) return "周一"
				if (val == 2) return "周二"
				if (val == 3) return "周三"
				if (val == 4) return "周四"
				if (val == 5) return "周五"
				if (val == 6) return "周六"
				if (val == 0) return "周日"
			},
			changeday(item) { //选择日期
				this.kckcb = item.kckcb
				this.currentdate = item.date
			},
			init(flag) {
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				let _this = this;
				let data = {
					id: this.listid,
					date:this.y+"-"+this.m
				}
				let url = '/api/user/userKcKcbTkSure'
				httpRequest.request(url, 'POST', data, false, false, true).then(res => {
					uni.hideLoading()
					this.dateData = res.data
					if (flag) {
						this.currentdate = res.data[0].date
						this.kckcb = res.data[0].kckcb
						return false
					}
					if (!flag && !this.currentdate) {
						this.currentdate = res.data[0].date
						this.kckcb = res.data[0].kckcb
						return false
					}
				})
			},
			// 选择时间
			cancel() {
				this.sjshow = false
			},
			// 开始时间
			sjconfirm(e) {
				console.log(e)
				this.sjshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toumd {
		opacity: 0.5;
	}
	
	.xiahuaxian1 {
		border-bottom: 1rpx solid #F5F5F5;
	}
	
	.nerbox {
		padding: 38rpx 31rpx;
	}
	
	.wexbxo {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	
	.youbk {
		border-right: 2rpx solid #F5F5F5;
	}
	
	.yxzbox {
		background: #1BA95B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.lvbox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		margin: 30rpx 30rpx 0 0;
		background-color: #1ba95d;
	}
	
	.xiaolvbox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #999;
		margin: 30rpx 30rpx 0 0;
		background-color: #effff6;
		font-size: 26rpx;
	}
	
	.huibox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #999;
		margin: 30rpx 30rpx 0 0;
		background-color: #f7f7f7;
		font-size: 26rpx;
	}
	
	.shijbox {
		padding: 12rpx 30rpx;
		background: #1BA95B;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
	
	.chanbox {
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #1BA95B;
		// width: 260rpx;
	}
	
	.yixlbtn {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		background: #1BA95B;
		width: 40rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	
	.wexzlbtn {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1BA95B;
		width: 40rpx;
		background: #EFFFF6;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	
	.huibtn {
		padding: 10rpx 20rpx;
		background: #F5F5F5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		width: 40rpx;
		color: #777777;
	}
	
	.weixzx {
		padding-bottom: 10rpx;
		// border-bottom: 6rpx solid #F5F5F5;
		// background: #1BA95B;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}
	
	.zitixhx {
		padding-bottom: 10rpx;
		border-bottom: 6rpx solid #1BA95B;
		// background: #1BA95B;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}
	
	page {
		background-color: #F9F9F9;
	}
	.textarea {
		padding: 30rpx;
		width: 100%;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
	}
</style>